import React, { Component } from 'react'
import axios from 'axios'
const Pubsub = require('pubsub-js')

export default class SearchInput extends Component {

  handleSearch = () => {
    // 获取名为input的ref,连续结构赋值
    const { input: { value } } = this
    if (value) {
      // 更新search的状态
      Pubsub.publish('Update', { isFirst: false, isLoading: true })
      axios.get(`api/students?name=${value}`).then(res => {
        // 更新search的状态
        Pubsub.publish('Update', { isLoading: false, list: res.data })
      }).catch(err => {
        Pubsub.publish('Update', { isLoading: false, err: '查询失败' })
      })
    }
  }

  render() {
    return (
      <div>
        <div>搜索用户</div>
        {/* 回调形式的ref */}
        <input ref={c => this.input = c } type="text" />
        <button onClick={this.handleSearch}>搜索</button>
      </div>
    )
  }
}
